<template>
  <div>
      <div class="pmi">
          <div class="top">
              <div>
                <span @click="fun()"><img src="/image/Mine/zjt.png" alt=""></span>
                <p>个人信息</p> 
              </div>
          </div>
          <div class="conten">
              <div>
                <ul>
                    <li>
                        <span class="lef">头像</span>
                        <span class="rig rig-tou"><img src="image/Mine/toux.png" alt=""></span>
                    </li>
                    <li>
                        <span class="lef">会员名</span>
                        <span class="rig">成燕燕1202</span>
                    </li>
                    <li>
                        <span class="lef">性别</span>
                        <span class="rig"></span>
                    </li>
                </ul>
              </div>
          </div>
          <div class="conten">
              <div>
                <ul>
                    <li>
                        <span class="lef">昵称</span>
                        <span class="rig">tbNick_b2abh</span>
                    </li>
                    <li>
                        <span class="lef">个性签名</span>
                        <span class="rig"></span>
                    </li>
                    <li>
                        <span class="lef">企业账号</span>
                        <span class="rig"></span>
                    </li>
                </ul>
              </div>
          </div>
          <div class="conten">
              <div>
                <h3>温馨提示</h3>
                <p>1.头像和昵称修改后将同时在关联的淘宝中生效哦。</p>
              </div>
          </div>
      </div>
  </div>
</template>

<script>
export default {
    methods:{
        fun(){
            this.$router.go(-1)
        }
    }
}
</script>

<style scoped>
.pmi{
    height: 7.28rem;
    background: #f4f4f4;
}
.top{
    background: #ffffff;
    width: 100%;
    display: flex;
    justify-content: center;
    height: 0.35rem;
}
.top div{
    width:93%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.top div span{
    position: absolute;
    left: 3%;
    width: 0.2rem;
    height: 0.2rem;
}
.top div span img{
    width: 0.18rem;
    height: 0.18rem;
}
.top div p{
    text-align: center;
}
.conten{
    width: 100%;
    display: flex;
    justify-content: center;
}
.conten div{
    background: #ffffff;
    margin-top: 0.08rem;
    border-radius: 0.08rem;
    width: 93%;
}
.conten div ul{
    width: 100%;
    display: flex;
    justify-content: center;
     flex-wrap: wrap;
}
.conten div ul li{
    height: 0.4rem;
    width: 95%;
    border-bottom: 0.01rem solid #f9f9f9;
    display: flex;
    justify-content: space-between;
   
    align-items: center;
}
.conten div ul li .lef{
    width: 0.4rem;
}
.conten div ul li .rig-tou{
    width: 0.25rem;
    height: 0.25rem;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    overflow: hidden;
    margin-right: 0.2rem;
}
.conten div ul li .rig-tou img{
    width: 0.25rem;
    height: 0.25rem;
}
.conten div h3{
    margin: 0.08rem 0 0.05rem 0.1rem;
    font-size: 0.12rem;
    font-weight: normal;
    color: #c6c6c6;
}
.conten div p{
    margin: 0.08rem 0 0.1rem 0.1rem;
    font-size: 0.11rem;
    color: #878787;
}
</style>